<template>
    <ul>
        <li :class="{active:item.completed}" v-for="(item,index) in data" :key="item.id">
            <input type="checkbox" :checked="item.completed" @change="checkChange(item,$event)">
            <b>{{item.todo}}</b>
            <button @click="del(index)">删除</button>
        </li>
    </ul>
    <fieldset>
        <button @click="filter('all')">全部：{{allCount}}</button>
        <button @click="filter('completed')">已完成：{{completedCount}}</button>
        <button @click="filter('active')"> 未完成：{{activeCount}}</button>
    </fieldset>
</template>
<script setup>
import {ref,defineProps,toRefs,defineEmits} from "vue"

let props=defineProps(['data','allCount','completedCount','activeCount'])

let {data,allCount,completedCount,activeCount}=toRefs(props)

let emit =defineEmits(['del','getfilterFlag'])

let del=index=>{
    emit('del',index)
}

let checkChange=(item,e)=>{
    console.log(e.target.checked);
    item.completed=e.target.checked
}

let filter=flag=>{
    console.log(flag);
    emit('getfilterFlag',flag)
}

</script>
<style scoped>
.active{
    background-color: lightsalmon;
    text-decoration: line-through;
}
</style>